import React, { FC, useEffect, useState } from "react"
import { Space, Tabs } from "antd"
import { FileTextOutlined, SettingOutlined } from "@ant-design/icons"
import ComponentProp from "./ComponentProp"
import PageSetting from "./PageSetting"
import useGetComponentInfo from "../../../../hooks/useGetComponentInfo"

// 枚举
enum TAB_KEYS {
    PROP_KEY = "prop",
    SETTING_KEY = "setting"
}

const RightPanel: FC = () => {
    // 动态切换tab栏：但选中组件时 显示组件属性，否则显示页面设置
    const [activeKey, setActiveKey] = useState(TAB_KEYS.PROP_KEY)
    const { selectedId } = useGetComponentInfo()

    useEffect(() => {
        // 选中了组件：显示组件属性
        if (selectedId) setActiveKey(TAB_KEYS.PROP_KEY)
        else setActiveKey(TAB_KEYS.SETTING_KEY)
    }, [selectedId])

    // 实现手动切换tab栏
    // onChange 回调函数会自动接收一个参数，这个参数是当前被点击的标签页的 key 值。
    const handleChangeTab = (key: string) => {
        if (key === TAB_KEYS.PROP_KEY) {
            setActiveKey(TAB_KEYS.PROP_KEY)
        } else {
            setActiveKey(TAB_KEYS.SETTING_KEY)
        }
    }

    const tabsItems = [
        {
            key: TAB_KEYS.PROP_KEY,
            label: (
                <span>
                    <Space size={10}>
                        <FileTextOutlined />属 性
                    </Space>
                </span>
            ),
            children: <ComponentProp />
        },
        {
            key: TAB_KEYS.SETTING_KEY,
            label: (
                <span>
                    <Space size={10}>
                        <SettingOutlined />
                        页面设置
                    </Space>
                </span>
            ),
            children: <PageSetting />
        }
    ]

    // 动态的要使用activeKey，defaultActiveKey属于静态的，类似于input
    return <Tabs centered tabBarGutter={50} activeKey={activeKey} onChange={key => handleChangeTab(key)} items={tabsItems}></Tabs>
}

export default RightPanel
